<template>
  <div class="shop">
    <Card>
      <div class="title" slot="title">
        <span>店铺管理 </span>
        <el-button
          size="medium"
          :type="disabled ? 'primary' : 'success'"
          @click="changgeBtn"
          >{{ disabled ? "编辑" : "保存" }}</el-button
        >
      </div>
      <div slot="content">
        <el-form
          :disabled="disabled"
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="店铺名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="店铺公告" prop="bulletin">
            <el-input type="textarea" v-model="ruleForm.bulletin"></el-input>
          </el-form-item>

          <!-- 店铺头像 -->
          <el-form-item label="店铺头像">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:5000/shop/upload/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="baseUrl + imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="店铺图片">
            <el-upload
              action="http://127.0.0.1:5000/shop/upload/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleImgSuccess"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>

          <el-form-item label="配送费">
            <el-input v-model="ruleForm.deliveryPrice"></el-input>
          </el-form-item>

          <el-form-item label="配送时间">
            <el-input v-model="ruleForm.deliveryTime"></el-input>
          </el-form-item>

          <el-form-item label="配送描述">
            <el-input v-model="ruleForm.description"></el-input>
          </el-form-item>

          <el-form-item label="店铺评分">
            <el-input v-model="ruleForm.score"></el-input>
          </el-form-item>

          <el-form-item label="销量">
            <el-input v-model="ruleForm.sellCount"></el-input>
          </el-form-item>

          <el-form-item label="活动">
            <el-checkbox-group v-model="ruleForm.supports">
              <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
              <el-checkbox
                label="VC无限橙果汁全场8折"
                name="type"
              ></el-checkbox>
              <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
              <el-checkbox label="特价饮品8折起" name="type"></el-checkbox>
              <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 日期 -->
          <el-form-item label="活动">
            <el-time-picker
              is-range
              v-model="ruleForm.date"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
        </el-form>
      </div>
    </Card>
  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { getShop, shopEdit } from "@/apis/shop.js";
export default {
  components: {
    Card,
  },
  data() {
    return {
      ruleForm: {
        supports: [],
      },
      imageUrl: "",
      baseUrl: "http://127.0.0.1:5000/upload/shop/",
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
      pics: [],
      disabled: true,
    };
  },
  methods: {
    // 店铺头像上传回调
    handleAvatarSuccess(res) {
      let { code, imgUrl, msg } = res;
      if (code == 0) {
        this.$message({
          type: "success",
          message: msg,
        });
        // 给图片赋值
        this.imgUrl = imgUrl;
      }
    },

    handleImgSuccess(res) {
      let { code, msg, imgUrl } = res;
      if (code == 0) {
        this.$message({
          type: "success",
          message: msg,
        });
        // 给数组赋值
        this.pics.push(imgUrl);
        // this.ruleForm.pics.push(imgUrl)
      }
    },
    // 上传头像之前触发的函数  在头像上传之前做一些限制，限制大小和格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    handleRemove(file, fileList) {
      this.pics.splice(this.pics.indexOf(file.name), 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 修改列表
    async changgeBtn() {
      this.disabled = !this.disabled;
      if (this.disabled == true) {
        this.ruleForm.pics = JSON.stringify(this.pics);
        this.ruleForm.supports = JSON.stringify(this.ruleForm.supports);
        this.ruleForm.date = JSON.stringify(this.ruleForm.date);
        let { code } = await shopEdit(this.ruleForm);
      }
    },

    // 渲染列表
    async getList() {
      let { data } = await getShop();
      this.ruleForm = data;
      this.imageUrl = data.avatar;
      let imgs = [];
      data.pics.forEach((item, i) => {
        imgs.push({
          name: item,
          url: this.baseUrl + item,
        });
      });

      this.fileList = imgs;
      this.pics = data.pics;
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.shop {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  overflow-y: scroll;
  height: 620px;
  .el-form {
    width: 480px;
    .demonstration {
      color: #67696d;
      margin-right: 10px;
    }
    /deep/.avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 160px;
      height: 160px;
      line-height: 160px;
      text-align: center;
    }
    .avatar {
      width: 160px;
      height: 160px;
      display: block;
    }
  }
}
</style>